<template>
  <div class="main-nav">
    <div class="header">
      <el-menu :default-active="activeMenu" class="el-menu-demo" mode="horizontal">
        <div style="display: inline-block" v-for="(e, i) in routerList" :key="i" @click="isLogin(e)">
          <el-menu-item :index="resolvePath(e.path)">{{e.title}}</el-menu-item>
        </div>
      </el-menu>
      <!-- <div class="sticky">
        <div class="logo" @click="toHome">
          <img src="@/assets/img/软协logo（蓝）.png" alt="" />
        </div>
        <div class="main">
          <ul>
            <li><a @click="$router.push('/')">首页</a></li>
            <li><a @click="toYwbd">学术交流</a></li>
            <li><a @click="associationNews">智聊室</a></li>
            <li><a @click="$router.push('/eventNews')">赛事咨询</a></li>
            <li><a @click="toXxzl">学习资料</a></li>
            <li><a @click="toSignUp">我要报名</a></li>
            <div class="bar"></div>
          </ul>
        </div>
        <div
          v-if="$store.getters.getIsLogin"
          style="
            margin-left: 1-0px;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 1%;
          "
        >
          <a
            style="font-size: 30px; margin-right: 25px; color: #409eff"
            href="#"
            title="消息"
            @click="news"
          >
            <i class="el-icon-chat-dot-round"></i>
          </a>
          <img v-lazy="userAvatar" class="headPortrait" />
          <el-dropdown>
            <span id="userName" style="margin-left: 10px; cursor: pointer"
              >{{ userName }}<i class="el-icon-arrow-down el-icon--right"></i
            ></span>
            <el-dropdown-menu slot="dropdown">
              <div @click="toUserInfoForm">
                <el-dropdown-item icon="el-icon-tickets" class="dropdown"
                  >个人中心</el-dropdown-item
                >
              </div>
              <div @click="logout">
                <el-dropdown-item icon="el-icon-user" class="dropdown"
                  >退出登录</el-dropdown-item
                >
              </div>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <button class="button" @click="$router.push('/login')" v-else>
          登录<span></span>
        </button>
      </div> -->
    </div>
  </div>
</template>

<script>
import * as commonUtil from "@/utils/commonUtil";
import * as permission from "../plugins/permission";
import Cookies from "js-cookie";
import { queryToken } from "@/api/user.js";
import { getJoinFormStatusByToken } from "@/api/signUp";
import { isExternal } from '@/utils/validate'
export default {
  name: "mainNav",
  data() {
    return {
      userName: "",
      userAvatar: "",
      routerList: [
        {
          path: "/",
          title: "首页",
          isLogin: false
        },
        {
          path: "/ywbd",
          title: "学术交流",
          isLogin: true
        },
        {
          path: "/SmartChatRoom",
          title: "智聊室",
          isLogin: true
        },
        {
          path: "/eventNews",
          title: "赛事咨询",
          isLogin: false
        },
        {
          path: "/xxzl",
          title: "学习资料",
          isLogin: true
        },
        {
          path: "/queryAdmissionResults",
          title: "我要报名",
          isLogin: true
        },
      ]
    };
  },
  computed: {
    activeMenu () {
      const route = this.$route
      console.log("1111111111----------",route)
      const { meta, path } = route
      // if set path, the sidebar will highlight the path you set
      if (meta.activeMenu) {
        return meta.activeMenu
      }
      return path
    }
  },
  mounted() {
    this.getUserInfo();
  },
  methods: {
    toHome() {
      this.$router.push("/");
    },
    //前往学术交流页面
    toYwbd() {
      if (Cookies.get("token")) {
        this.$router.push("/ywbd");
      } else {
        this.$message.warning("您还未登录，请前往登录");
        this.$router.push("/");
      }
    },
    //前往学习资料页面
    toXxzl() {
      if (Cookies.get("token")) {
        this.$router.push("/xxzl");
      } else {
        this.$message.warning("您还未登录，请前往登录");
        this.$router.push("/");
      }
    },
    //前往软协动态页面
    associationNews() {
       if (Cookies.get('token')) {
        this.$router.push('/SmartChatRoom')
      }else{
        this.$message.warning("您还未登录，请前往登录");
        this.$router.push("/");
      }
    },
    //前往我要报名功能
    toSignUp() {
      if (Cookies.get("token")) {
        this.goQueryAdmissionResults();

        // // 创建一个Date对象，表示2024年10月1日0点
        // let targetDate = new Date(2024, 9, 1, 0, 0, 0); // 注意月份是从0开始的，所以9代表10月

        // // 获取当前日期和时间
        // let now = new Date();

        // // 比较当前时间是否小于目标时间
        // if (now < targetDate) {
        //   this.$router.push("/signUp");
        // } else {
        //   this.$message.warning("报名时间已截止");
        // }
      } else {
        this.$message.warning("您还未登录，请前往登录");
        this.$router.push("/");
      }
    },
    //前往查询录取结果页面
    goQueryAdmissionResults() {
      if (Cookies.get("token")) {
        //获取是否能查询录取结果
        getJoinFormStatusByToken().then((res) => {
          if (res.code == 20001) {
            this.$message.error(res.message);
            return;
          } else {
            this.$router.push("/queryAdmissionResults");
          }
        });
      } else {
        this.$message.warning("您还未登录，请前往登录");
        this.$router.push("/");
      }
    },
    //滑动页面，导航条变化
    // slideNavigationBarChanges() {
    //   window.addEventListener("scroll", () => {
    //     let block = document.querySelector(".block");
    //     block.classList.toggle("sticky", window.scrollY > 0);
    //   });
    // },

    //获取用户个人信息
    getUserInfo() {
      // this.userAvatar = this.$store.state.userInfo.avatar;
      // this.userName = this.$store.state.userInfo.nickname;

      // queryToken().then((res) => {
      // console.log(res);
      this.$store.dispatch("queryUser").then(() => {
      this.userAvatar = this.$store.state.userInfo.avatar;
      this.userName = this.$store.state.userInfo.nickname;
      // });
      // console.log("头像：" + this.$store.state.userInfo.avatar);
      // console.log("昵称" + this.userName);
      })
    },
    //消息模块
    news() {
      this.$message.warning("暂未开放，敬请期待");
    },
    //个人中心
    toUserInfoForm() {
      this.$router.push("/userInfoForm");
    },
    //退出登录
    logout() {
      commonUtil.removeStore("token");
      permission.init();
      //跳转页面
      this.$store.dispatch("logout");
      this.$router.push("/");
      this.$message.success("退出成功");
    },
    // 處理路由地址
    resolvePath (routePath) {
      console.log(routePath)
      if (isExternal(routePath)) {
        return routePath
      }
      return routePath
    },
    isLogin(e){
      if(e.path=='/queryAdmissionResults'){
        this.goQueryAdmissionResults()
        return
      }
      if (e.isLogin && !Cookies.get('token')) {
        this.$message.warning("您还未登录，请前往登录");
        return
      }
      this.$router.push(e.path);
    },
    
  },
};
</script>

<style scoped>
body {
  min-height: 50vh;
  height: 100000px;
}

/* 导航栏 */
.header .sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  /* padding: 40px 20px; */
  z-index: 1000;
  transition: 0.6s;
  justify-content: space-around;
}

/* 滑动页面改变导航栏样式 */
.sticky {
  padding: 6px 10px;
  background-color: #fff;
  background-image: linear-gradient(to bottom, #fff, #fff);
}

.sticky .logo img {
  background-size: cover;
  width: 230px;
  height: 75px;
}

.sticky .main {
  font-size: 18px;
  text-align: center;
}

.sticky .main ul li a {
  color: black;
  margin: 0 30px;
  -webkit-text-decoration: none;
  text-decoration: none;
}
.header{
  text-align: center;
}
.header .block .main ul li {
  margin-right: 20px;
  list-style: none;
  cursor: pointer;
}

.sticky .main ul {
  display: flex;
  justify-items: center;
  align-items: center;
}

/* 下划线跟随鼠标移动 */
.sticky .main ul li {
  position: relative;
  margin-right: 20px;
  list-style: none;
  cursor: pointer;
}

.sticky .main ul li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  width: 0%;
  height: 100%;
  border-bottom: 2px solid #5698c3;
  transition: 0.2s all linear;
}

.sticky .main ul li:hover::before {
  width: 100%;
  top: 0;
  left: 0;
  transition-delay: 0.1s;
  z-index: -1;
}

.sticky .main ul li:hover ~ li::before {
  left: 0;
}

/* 鼠标移动改变字体颜色 */
.sticky .main ul li a:hover {
  /* background-color: rgba(255, 255, 255, 0.25); */
  color: #5698c3;
}

.bar {
  font-size: 18px;
  text-align: center;
}

.headPortrait {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  display: inline-block;
  box-sizing: border-box;
  text-align: center;
  overflow: hidden;
  color: #fff;
  background: #c0c4cc;
}

.dropdown {
  padding: 5px 10px;
}

.button {
  border: 5px solid royalblue;
  display: block;
  position: relative;
  padding: 0.5em 2.2em;
  font-size: 25px;
  background: transparent;
  cursor: pointer;
  user-select: none;
  color: royalblue;
  overflow: hidden;
  z-index: 100;
}

.button span {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: -1;
}

.button span::before {
  content: "";
  position: absolute;
  width: 8%;
  height: 500%;
  /* background: #f5f5f5; */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-60deg);
  transition: all 1s;
}

.button:hover span::before,
.button:focus span::before {
  transform: translate(-50%, -50%) rotate(-90deg);
  width: 100%;
  background: royalblue;
}

.button:hover,
.button:focus {
  color: #fff;
}
</style>
